#{extends 'main.html' /} 
#{set title:'Register' /}
#{set 'moreStyles'}
	#{stylesheet 'register.css'/}
#{/set}

<div id = "main" class = "span-24 last"> 

	#{form @Registration.createNewCustomer(), method:'POST'}
	<div id = "registrationForm">
	<table id = "registrationTable">
		<tr>
			<td height="50" colspan="2" class="registrationtdheader">&{'reg.personal'}</td>
		</tr>

    	#{field 'person.firstName'}
		<tr>
			<td><label for="firstname">&{'reg.firstname'}: </label></td>
			<td><input type="text" name="${field.name}" id="${field.name}" maxlength="50" value="${person?.firstName}" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		#{field 'person.lastName'}
		<tr>
			<td><label for="lastname" >&{'reg.lastname'}:</label></td>
			<td><input type="text" name="${field.name}" id="${field.name}" maxlength="50" value="${person?.lastName}" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		#{field 'person.email'}
		<tr>
			<td><label for="email" >&{'reg.email'}:</label></td>
			<td><input type="text" name="${field.name}" id="${field.name}"  maxlength="50" value="${person?.email}" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		#{field 'password'}
		<tr>
			<td><label for="password" >&{'reg.password1'}:</label></td>
			<td><input type="password" name="${field.name}" id="${field.name}" maxlength="50" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		#{field 'passwordValidate'}
		<tr>
			<td><label for="password" >&{'reg.password2'}:</label></td>
			<td><input type="password" name="${field.name}" id="${field.name}" maxlength="50" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		
		<tr>
			<td colspan="2" class="registration td header">&{'reg.billingaddress'}</td>
		</tr>
		#{field 'address.street'}
		<tr>
			<td><label for="street" >&{'reg.street'}: </label></td>
			<td><input type="text" name="${field.name}" id="${field.name}" maxlength="50" value="${address?.street}"  /></td>
			<td>${field.error}</td>
		</tr>
		#{/field}
		#{field 'address.city'}
		<tr>
			<td><label for="city" >&{'reg.city'}: </label></td>
			<td><input type="text" name="${field.name}" id="${field.name}"  maxlength="50" value="${address?.city}" /></td>
			<td>${field.error}</td>
		</tr>
		#{/field}
		#{field 'address.zip'}
		<tr>
			<td><label for="zip" >&{'reg.zip'}:</label></td>
			<td><input type="text" name="${field.name}" id="${field.name}" value="${address?.zip}" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		#{field 'address.phone'}
		<tr>
			<td><label for="phone" >&{'reg.phone'}:</label></td>
			<td><input type="text" name="${field.name}" id="${field.name}"  maxlength="50" value="${address?.phone}" /></td>
			<td class="required">${field.error}</td>
		</tr>
		#{/field}
		<tr>
			<td><input type="submit" id="submitButton" class="button" name="Submit" value="&{'reg.submit'}" /></td>
		</tr>
	</table>
	</div>
	#{/form}
	
</div>
